<template>
  <f-table ref="tableRef" @register="register">
  <template #header-left>
    <el-button type="primary">选择门店</el-button>
    <el-button>{{ t('export') }}</el-button>
  </template>
  <template #status="scope">
      <el-switch
      :active-value="1"
      :inactive-value="0"
      :model-value="scope.row.status"
      @click="handleStatusChange(scope.row)"
      />
  </template>

  <template #action="{ row }">
    <el-button type="primary" link @click="handleDelete(row)">客户详情</el-button>
  </template>
  </f-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { t } from '@/lang'
import { useRouter } from 'vue-router'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/activity.video.store-data'
import { batchDeleteActivityApi, deleteActivityApi, editActivityApi, getActivityListApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()

const searchForm = ref({
    cate_id: 0
})
const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IActivityItem>[],
    beforeFetch: (opt) => {
        return { ...opt, cate_id: searchForm.value.cate_id || '' }
    },
    api: async (opt) => (await getActivityListApi(opt)).data
})
/**
 * @description 删除数据
 */
async function handleDelete (row: IActivityItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteActivityApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        methods.reload()
    }
}

/**
 * @description 批量删除
 */
async function handleBatchDelete () {
    const selection:IActivityItem[] = methods.getSelectionRows()
    if (selection.length == 0) {
        ElMessage.warning(t('deleteEmptyTips'))
        return
    }
    const ids = selection.map(item => item.id)
    const action = await ElMessageBox.alert(t('deleteBatchTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await batchDeleteActivityApi(ids)

        ElMessage.success(t('deleteSuccess'))
        // 清空选项
        methods.clearSelection()
        // 重新加载数据
        methods.reload()
    }
}

/**
 * @description 状态切换
 * @param row
 */
async function handleStatusChange (row: IActivityItem) {
    const text = ['启用', '停用'][row.status || 0]
    const action = await ElMessageBox.alert(
        `确认要"${text}""${row.title}"视频吗?`,
        '系统提示',
        {
            type: 'warning',
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }
    )
    if (action === 'confirm') {
        const params = {
            status: [1, 0][row.status || 0],
            id: row.id
        }
        await editActivityApi(params)
        ElMessage.success(`${text}成功`)
        row.status = [1, 0][row.status || 0]
    }
}

function reload () {
    methods.reload()
}

defineExpose({
    reload
})
</script>

<style lang="scss" scoped>
:deep(.f-search) {
    background-color: var(--el-bg-color-page);
}
</style>
